// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化所有功能
    initNavigation();
    initProductFilter();
    initContactForm();
    initScrollEffects();
});

// 导航功能
function initNavigation() {
    // 移动端菜单切换
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const mainNav = document.querySelector('.main-nav');

    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', function() {
            mainNav.classList.toggle('active');

            // 切换图标
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });
    }

    // 滚动时高亮当前部分的导航项
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.main-nav a');

    window.addEventListener('scroll', function() {
        let current = '';

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;

            if (pageYOffset >= sectionTop - 100) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href').substring(1) === current) {
                link.classList.add('active');
            }
        });
    });

    // 平滑滚动到锚点
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);

            if (targetSection) {
                const offsetTop = targetSection.offsetTop - 70;

                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });

                // 移动端关闭菜单
                if (window.innerWidth <= 768) {
                    mainNav.classList.remove('active');
                    const icon = mobileMenuToggle.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }
        });
    });
}

// 产品筛选功能
function initProductFilter() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    const productsGrid = document.querySelector('.products-grid');

    // 产品数据
    const products = [
        {
            id: 1,
            name: 'ABS工程塑料',
            category: 'engineering',
            description: '高强度、耐冲击的工程塑料，适用于汽车零部件、电子产品外壳等',
            image: 'https://picsum.photos/seed/abs-plastic/400/300.jpg'
        },
        {
            id: 2,
            name: 'PP聚丙烯',
            category: 'commodity',
            description: '轻质、耐化学腐蚀的通用塑料，广泛用于包装、日用品等',
            image: 'https://picsum.photos/seed/pp-plastic/400/300.jpg'
        },
        {
            id: 3,
            name: 'PE聚乙烯',
            category: 'commodity',
            description: '优异的电绝缘性和耐低温性，常用于电线电缆、管道等',
            image: 'https://picsum.photos/seed/pe-plastic/400/300.jpg'
        },
        {
            id: 4,
            name: 'PC聚碳酸酯',
            category: 'engineering',
            description: '高透明度、高强度的工程塑料，适用于光学镜片、安全防护等',
            image: 'https://picsum.photos/seed/pc-plastic/400/300.jpg'
        },
        {
            id: 5,
            name: 'PA尼龙',
            category: 'engineering',
            description: '耐磨、自润滑的工程塑料，适用于齿轮、轴承等机械零件',
            image: 'https://picsum.photos/seed/nylon-plastic/400/300.jpg'
        },
        {
            id: 6,
            name: 'PTFE聚四氟乙烯',
            category: 'specialty',
            description: '耐高温、耐腐蚀的特种塑料，适用于密封件、防腐涂层等',
            image: 'https://picsum.photos/seed/ptfe-plastic/400/300.jpg'
        },
        {
            id: 7,
            name: 'POM聚甲醛',
            category: 'engineering',
            description: '高刚性、低摩擦的工程塑料，适用于精密零件、汽车配件等',
            image: 'https://picsum.photos/seed/pom-plastic/400/300.jpg'
        },
        {
            id: 8,
            name: 'PVC聚氯乙烯',
            category: 'commodity',
            description: '阻燃、耐候性好的通用塑料，广泛用于建筑材料、电线电缆等',
            image: 'https://picsum.photos/seed/pvc-plastic/400/300.jpg'
        }
    ];

    // 渲染产品
    function renderProducts(category) {
        productsGrid.innerHTML = '';

        const filteredProducts = category === 'all' 
            ? products 
            : products.filter(product => product.category === category);

        filteredProducts.forEach(product => {
            const productCard = document.createElement('div');
            productCard.className = 'product-card';
            productCard.innerHTML = `
                <div class="product-image">
                    <img src="${product.image}" alt="${product.name}">
                </div>
                <div class="product-info">
                    <h3>${product.name}</h3>
                    <p>${product.description}</p>
                    <a href="#contact" class="btn btn-primary">咨询产品</a>
                </div>
            `;

            // 为产品卡片的咨询按钮添加平滑滚动
            const contactBtn = productCard.querySelector('.btn');
            contactBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const contactSection = document.getElementById('contact');
                const offsetTop = contactSection.offsetTop - 70;

                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            });

            productsGrid.appendChild(productCard);
        });
    }

    // 初始显示所有产品
    renderProducts('all');

    // 标签切换事件
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 更新活动标签
            tabButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');

            // 筛选并渲染产品
            const category = this.getAttribute('data-category');
            renderProducts(category);
        });
    });
}

// 联系表单功能
function initContactForm() {
    const contactForm = document.getElementById('inquiry-form');

    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                product: document.getElementById('product').value,
                message: document.getElementById('message').value
            };

            // 简单验证
            if (!formData.name || !formData.email || !formData.message) {
                showNotification('请填写必填项', 'error');
                return;
            }

            // 模拟表单提交
            showNotification('您的咨询已提交，我们会尽快与您联系！', 'success');

            // 重置表单
            contactForm.reset();
        });
    }
}

// 滚动效果
function initScrollEffects() {
    // 添加滚动时的动画效果
    const animateElements = document.querySelectorAll('.section');

    function checkScroll() {
        const triggerBottom = window.innerHeight * 0.8;

        animateElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;

            if (elementTop < triggerBottom) {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    }

    // 初始设置元素样式
    animateElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    });

    // 监听滚动事件
    window.addEventListener('scroll', checkScroll);

    // 初始检查
    checkScroll();
}

// 通知功能
function showNotification(message, type) {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;

    // 添加样式
    notification.style.position = 'fixed';
    notification.style.top = '20px';
    notification.style.right = '20px';
    notification.style.padding = '15px 25px';
    notification.style.borderRadius = '4px';
    notification.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    notification.style.zIndex = '9999';
    notification.style.transform = 'translateX(120%)';
    notification.style.transition = 'transform 0.3s ease';

    // 根据类型设置颜色
    if (type === 'success') {
        notification.style.backgroundColor = '#2ecc71';
        notification.style.color = '#fff';
    } else if (type === 'error') {
        notification.style.backgroundColor = '#e74c3c';
        notification.style.color = '#fff';
    }

    // 添加到DOM
    document.body.appendChild(notification);

    // 显示通知
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    // 3秒后移除通知
    setTimeout(() => {
        notification.style.transform = 'translateX(120%)';

        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}